<template>
  <div id="chart2" style="width: 300px;height: 300px;margin-left: 70px">
  </div>
</template>

<script>
  export default {
    name: 'chart2',
    mounted() {
      this.initCharts()
    },
    methods: {
      initCharts() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('chart2'))

        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            left: 1,
            data: ['直接访问', '邮件营销', '联盟广告']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '75%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' }
              ]
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
